<template>
    <div class="login" :style="{ 'height': bodyHeight}">
        <div class="login_top">
            <div class="login_top_content">
                <img src="@/assets/img/login/logo.png" alt="">
                <div>您好，</div>
                <div>欢迎使用元表纪</div>
            </div>
        </div>
        <van-form>
            <van-cell-group inset>
                <div class="text"><img src="@/assets/img/my/zhanghao-icon.png" alt=""> 账号 </div>
                <van-field autosize v-model="AccountName" name="账号" label="" placeholder="请输入您的账号" />
                <br />
                <div class="text"><img src="@/assets/img/my/mima-icon.png" alt=""> 密码 </div>
                <van-field autosize v-model="Password" type="password" name="密码" label="" placeholder="请输入您的密码" />
            </van-cell-group>
            <div class="login_from">
                <van-button block type="primary" class="btn1" @click="onSubmit"> 登录 </van-button>
                <div class="sart"> <a @click="goRegister()"> 立即注册</a> </div>
            </div>
        </van-form>
    </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { Toast, Notify } from 'vant';
import { useStore } from "vuex"; // ⚪️ 引入状态管理
import router from "@/router";
import CryptoJS from 'crypto-js'
export default {
    setup() {
        const store = useStore(); // 获取对象
        const user = reactive({
            AccountName: '',
            Password: '',
        });
        const state = reactive({
            bodyHeight: '',
        });
        onMounted(() => {
            state.bodyHeight = document.documentElement.offsetHeight+'px';//注意：这里动态计算页面高度
            console.log(state.bodyHeight);
        });
        // 1、构建登录请求
        // 2、获取用户名和密码发送到服务端
        function onSubmit() {
            if (user.AccountName == '') {
                Notify({ type: 'warning', message: '请输入您的账号' });
                return false
            }
            if (user.Password == '') {
                Notify({ type: 'warning', message: '请输入您的密码' });
                return false
            }
            
            user.Password=CryptoJS.MD5(user.Password).toString();
            const toast = Toast.loading({
                duration: 0,
                forbidClick: true,
                message: '用户登录中...',
            });
            // 调用action的登录方法
            store.dispatch("Login", user).then((res) => {
                toast.clear()
                if (res.success == true) {
                    router.push({ path: "/home" });
                } else {

                }

            }).catch(() => {
                user.Password=''
                Notify({ type: 'danger', message: '用户名或密码错误' });
                toast.clear()
            });
        }
        const goRegister = () => {
            router.push('/register')
        };
        return {
            ...toRefs(user),
            goRegister,
            onSubmit,
        };
    },
};
</script>

<style scoped></style>